<template>
  <div class="findrank">
    <div class="head">
      <i class="iconfont head-icon" @click="comeBack">&#xe689;</i>
      亲青筹
      <!--捐赠排名-->
    </div>
    <div class="find-head">
        <img src="../../images/juankuanpaiming.png"/>
    </div>
    <div class="selected-data">
       <ul>
          <li @click="isAShow" :class="{'data-active': isA}"><i>日</i>排名</li>
          <li @click="isBShow" :class="{'data-active': isB}"><i>月</i>排名</li>
          <li @click="isCShow" :class="{'data-active': isC}"><i>年</i>排名</li>
       </ul>
    </div>
    <div class="rank-list">
      <scroller lock-x height="-0px" :bounce="bounce" :use-pullup='use_pullup' :pullup-config="pullup_con" @on-pullup-loading="onScrollBottom" ref="scroller" :scroll-bottom-offst="200">
        <div>
          <ul>
            <!--<div v-if="showList == ''">暂无数据</div>-->
            <li v-for="(showLists, index) in showList">
              <!--&#xe614;-->
              <div style="width: 40px;position: relative;">
                <i v-show="index == 0" class="iconfont" style="color: #ff8402;position: absolute;left: 0px;font-size: 30px">&#xe62e;</i>
                <i v-show="index == 1" class="iconfont" style="color: #0068ff;position: absolute;left: 0px;font-size: 30px">&#xe62e;</i>
                <i v-show="index == 2" class="iconfont" style="color: #91d044;position: absolute;left: 0px;font-size: 30px">&#xe62e;</i>
                <span style="position: absolute;left: 10px;top: 4px;font-size: 17px" :class="{'colorText': index == 0 || index == 1 || index == 2}">{{index+1}}</span>
              </div>
              <!--<i></i>-->
              <img v-if="showLists.headUrl != null && showLists.headUrl != '' && showLists.headUrl.indexOf('http') != -1" :src="showLists.headUrl"/>
              <img v-else-if="showLists.headUrl != null && showLists.headUrl != '' && showLists.headUrl.indexOf('http') == -1" :src="imageUrl.imageUrl + showLists.headUrl" alt="">
              <img v-else="" src="../../images/morentouxiang02.jpg" alt="">
              <span class="rank-list-right"><em :class="{'emE': showLists.nickname.length <= 10}">{{showLists.nickname}}</em><span><a>{{showLists.amount}}</a>元</span></span>
            </li>
            <load-more :tip="tipText" :show-loading="show_loading"></load-more>
          </ul>
        </div>
      </scroller>

    </div>
  </div>
</template>

<script src="./findrank.js"></script>
